<template>
    <div class="cen">
        <div class="top">
            <div>
                <a href="###">
                    <img src="@/assets/12-10/2.png" alt="" @click="fa">
                </a>
            </div>
                <div class="top-top">
                    <img src="@/assets/12-10/1.png" alt="">
                </div>
            </div>
        <!-- 内容 --> 
        <div class="main">
            <div class="main-input">
                <div class="main-input-box">
                    <img :src=imgs[num] alt="">
                    <p>
                        {{num+1}}、{{text[num]}}
                    </p>
                    <p v-for="(value,index) in keys[num]" :key="index">
                        <span>
                            <input type="radio">
                            <label for="">
                             {{keys[num][index] }}
                            </label>
                        </span>
                    </p>
                </div>
            </div>
        </div>
        <div class="foot">
            <button @click="fn">确定</button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            num:0,
            text:[
                    '在党内搞团团伙伙、结党营私、拉帮结派、培植私人势力或者通过搞利益交换、为自己营造声势等活动捞取政治资本的，给予严重警告或者撤销党内职务处分；情节严重的给予留党察看或者开除党籍处分。',
                    '利用职权或者职务上的影响操办婚丧喜庆事宜，在社会上造成不良影响的，给予警告或者严重警告处分;情节严重的，给予开除党籍处分。',
                    '组织迷信活动的属于违反组织纪律行为，给予撤销党内职务或者留党察看处分。',
                    '党员以组织讲座论坛、报告会、座谈会等方式，反对党的重大方针政策，造成严重不良影响的，给予____处分。',
                    '党员在国(境)外、外国驻华使(领)馆申请政治避难，或者违纪后逃往国(境)外、外国驻华使(领)馆的，应给予其____处分。'
                ],
            keys:[
                ['正确','错误'],
                ['正确','错误'],
                ['正确','错误'],
                ['A.留党察看','B.撤销党内职务','C.开除党籍'],
                ['A.严重警告','B.开除党籍','C.撤销党内职务'],
                ],
            imgs:[
                require("@/assets/12-10/1.jpg"),
                require("@/assets/12-10/2.jpg"),
                require("@/assets/12-10/3.jpg"),
                require("@/assets/12-10/4.jpg"),
                require("@/assets/12-10/5.jpg"),
            ]
        }
    },
    methods:{
        fn(){
            if(this.num>=4){
                this.num=4
            }else{
                ++this.num;
            }
        },
        fa(){
            this.$emit("son","Tou");
        }
    }
}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.cen {
    width:640px;
    height: 1000px;
    margin: auto;
    background: url("C:/Users/14129/Documents/web1906vue/webvue/src/assets/12-10/01.png");
}
.top {
    position:relative;
    padding-top: 164px;
    width:100%;
}
.top>div>a>img {
    top: 50px;
    right: 30px;
    position: absolute;
}
.top-top h1 {
    color:white;
    padding: 30px;
    text-align: left;
}
.top-top h2 {
    text-align:center;
    font-family: "宋体";
    font-size: 45px;
    padding-top: 70px;
    padding-bottom: 50px;
}

/* main */
.main {
    width: 100%;
}
.main-input {
    background: rgb(239,101,101);
    width:96%;
    margin: 0 2% 0;
}
.main-input-box {
    padding: 10px 15px 15px;
}
.main-input-box p {
    color:white;
    font-size: 30px;
}
.main-input-box span input {
    width: 20px;
    height: 20px;
}

/* foot */
.foot {
    width: 100%;
    padding-top: 70px;
    padding-bottom:150px;
}
.foot button {
    width: 40%;
    margin: auto;
    background: rgb(254,198,31);
    color: red;
    display: block;
    height: 80px;
    font-size: 30px;
    border-radius: 25px;
    padding-bottom: 30px;
}


</style>